<template>
	<div class="category">
		<!-- 顶部搜索 -->
		<div class="header">
			<input type="text" class="search">
		</div>
		<!-- 内容 -->
		<div class="content">
			<!-- 侧边 -->
			<div class="aside">
				<div 
				@click="clickHd(index,item)"
				:class="{'active':current==index}"
				class="item" v-for="(item,index) in category" :key="item.category_id">{{item.category_name}}</div>
			</div>
			<!-- 右侧（自适应宽） -->
			<!-- 当 category有长度时候才渲染右侧内容-->
			<div class="right" v-if="category.length">
				<div v-for="(cate,index) in category[current].category_list" :key="index">
					<CellAutoFill class="cell_auto_fill" :data="cate.body"  v-if="cate.view_type==='cells_auto_fill'"></CellAutoFill>
					<div v-if="cate.view_type==='category_title'" class="category_title">
						{{cate.body.category_name}}
					</div>
					<div v-if="cate.view_type==='category_group'">
						<ProductList v-if="cate.body.product_list" class="product_list" :data="cate.body.product_list"></ProductList>
						<ProductItems v-if="cate.body.items" class="items" :data="cate.body.items"></ProductItems>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	// 导入接口
	import {
		GetCategory
	} from '@/api/category.js'
	// 导入组件
	import CellAutoFill from '@/components/CellAutoFill.vue'
	import ProductList from '@/components/ProductList.vue'
	import ProductItems from '@/components/ProductItems.vue'
	export default {
		// 注册组件
		components:{CellAutoFill,ProductList,ProductItems},
		data(){
			return {
				// 分类信息
				category:[],
				current:1,//高亮侧边
			}
		},
		methods:{
			// 单击切换高亮
			clickHd(index,item){
				// console.log(index,item);
				this.current = index;
				// 如果没有categorylist就去请求category
				if(!item.category_list){
					GetCategory({
						client_id: 180100031051,
						webp: 1,	
						// 传递一个当前的分类id
						cat_id:item.category_id
					})
					.then(res=>{
						// 更新当前item的分类信息
						item.category_list = res.data.data[0].category_list;
						// vue通过下标修改的数据都不会更新视图
						// 数据已经更新，视图是否更新？
						// 强制vue更新视图（$set可以实现强制更新）this.$set(要更新的数据，下标，数据)
						this.$set(this.category,index,item);
						console.log(item);
					})
					.catch(err=>{
						console.log("错误",err)
					})
				}
				
			}
		},
		created() {
			GetCategory({
					client_id: 180100031051,
					webp: 1
				})
				.then(res => {
					console.log(res.data)
					// 更新分类信息
					this.category = res.data.data;
				})
				.catch(err => {
					console.error("失败", err);
				})
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.aside{
		
		.item{
			line-height: .88rem;
			// border-bottom: 1px solid #f0f0f0;
			font-size: .24rem;
			text-align: center;
			color:#777;
		}
		.active{
			color:#f70;
		}
	}
	.category {
		display: flex;
		flex-direction: column;

		.header {
			height: .84rem;
			background-color: #f0f0f0;
			line-height: .84rem;
			vertical-align: middle;
			display: flex;
			align-items: center;

		}

		.search {
			line-height: .6rem;
			height: .6rem;
			border-radius: .6rem;
			box-sizing: border-box;
			border: none;
			margin: 0 .6rem;
			background-color: #fff;
			flex: 1;
		}

		.content {
			flex: 1;
			display: flex;
			overflow: hidden;
		}

		.aside {
			width: 1.5rem;
			background-color: #fafafa;
			height: 100%;
			overflow-y: auto;
		}

		.right {
			height: 100%;
			flex: 1;
			padding: .15rem;
			overflow-y: auto;
			.cell_auto_fill{
				transform: scale(0.75);
				transform-origin: left;
			}
			.category_title{
				text-align: left;
				line-height: .44rem;
				height: .44rem;
				font-size: .26rem;
				font-weight: 900;
				
			}
		}
	}
</style>
